﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SOSOMap_TestControl</title>
<style type="text/css">
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
</style>
<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
<script>
//地图初始化
function init() {
	navControl = null;
	scaleControl = null;
	map = new soso.maps.Map(document.getElementById("container"), {
		// 地图的中心地理坐标。
		center: new soso.maps.LatLng(39.916527,116.397128),
		zoomLevel:13
	});
}
//添加导航控件
function addNavigationControl(){
	if(navControl){//如果已经创建对象的实例
		navControl.setMap(map);
		return;
	}
	navControl = new soso.maps.NavigationControl({
		align:soso.maps.ALIGN.TOP_LEFT,
		margin:new soso.maps.Size(5, 15),
		map:map
	});
}
//添加比例尺控件
function addScaleControl(){
	if(scaleControl){//如果已经创建对象的实例
		scaleControl.setMap(map);
		return;
	}
	scaleControl = new soso.maps.ScaleControl({
		align:soso.maps.ALIGN.BOTTOM_LEFT,
		margin:new soso.maps.Size(85,15),
		map:map
	});
}
//移除控件
function removeControl(){
	if(navControl){//防止还没有实例化对象
		navControl.setMap(null);
	}
	if(scaleControl){//防止还没有实例化对象
		scaleControl.setMap(null);
	}
}
//改变控件位置
function changeControl(){
	if(navControl){//发现改变设置后视觉效果上并不能马上改变，所以先移除再显示
		navControl.setMap(null);
		navControl.setAlign(soso.maps.ALIGN.TOP_RIGHT);
		navControl.setMargin(new soso.maps.Size(5, 15));
		navControl.setMap(map);
	}
	if(scaleControl){
		scaleControl.setMap(null);
		scaleControl.setAlign(soso.maps.ALIGN.BOTTOM_RIGHT);
		scaleControl.setMargin(new soso.maps.Size(85,15));
		scaleControl.setMap(map);
	}
}
//添加右键菜单
function addContextMenu(){
	var contextMenu = new soso.maps.ContextMenuControl();
	contextMenu.setMap(map); 
	contextMenu.addItem('获取地图中心坐标', getCenter);
	contextMenu.addSeparator();//添加菜单项之间的分割线
	contextMenu.addItem('获取地图缩放级别', getZoom);
	contextMenu.addSeparator();
	contextMenu.addItem('在此处发布微博',function (){
		alert('发布了一条微博');
	});//也可以用这种方式为菜单项添加处理函数，如果函数较短
	contextMenu.addTarget(map);
         
	function getCenter() {
		alert('地图中心坐标为: [' + map.getCenter().getLng() + ', ' +
		map.getCenter().getLat() + ']');
	}
     
	function getZoom(){      
		alert('地图缩放级别为: ' + map.getZoomLevel());
	}
}
//自定义控件
function addSelfDefControl(){
	var zoomControl = new soso.maps.Control({
		content:'缩放级别：' + map.getZoomLevel(),
		align:soso.maps.ALIGN.TOP,
		map:map
	});
	
	soso.maps.Event.addListener(map, 'zoomlevel_changed', function(){
		zoomControl.setContent('缩放级别：' + map.getZoomLevel());
	});
}
</script>
</head>
<body onload="init();">
<div style="width:650px;height:400px" id="container"></div> 
<input value="添加导航控件" type="button" onclick="addNavigationControl();"/>
<input value="添加比例尺控件" type="button" onclick="addScaleControl();"/>
<input value="移除控件" type="button" onclick="removeControl();"/>
<input value="改变控件位置" type="button" onclick="changeControl();"/>
<input value="添加右键菜单" type="button" onclick="addContextMenu();"/>
<input value="添加自定义控件" type="button" onclick="addSelfDefControl();"/>
</body>
</html>